<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约过程 - 五四宪法历史资料陈列室</title>
    <link rel="stylesheet" href="/static/pc/css/style.css">
    <script src="/static/pc/js/jquery.min.js"></script>
<!--    <script src="/static/pc/js/ajaxbao.js"></script>-->
    <link rel="stylesheet" href="/static/layui/layui/css/layui.css"  media="all">
    <script src="/static/pc/js/jquery.min.js"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/layui/layui/layui.all.js"></script>
</head>
<body>
<div class="head">
    <img src="/static/pc/img/head.jpg" alt="">
</div>
<div class="main">
    <div class="title_img"><img src="/static/pc/img/title1.png" alt=""></div>
    <div class="top_right">
        {if condition="$Think.session.mobile"}<span class="login_status">{$Think.session.mobile} </span><a class="login_status" href="home_tuichu" onclick="$('.layer2').show()"> 退出</a>{/if}
        <a href="javascript:history.back(-1)"><img src="/static/pc/img/back.png" alt=""></a>
    </div>
    <form action="edit" id="information" method="post" hidden>
        <div class="content edit">
<!--            <input type="text" value="{$data['explain']}">-->
            <input type="hidden" value="{$list['id']}" name="id">
            <div class="mb0">
                <span>参观场馆</span>
                <a onclick="clickGuan('A')" href="javascript:;" class="venue  {if condition="$data['venue'] eq 1" }select {/if} "  data-v="A" >{if condition="$data['venue'] eq 1" }<img src="/static/pc/img/button.png" alt="">{else/}<img src="/static/pc/img/button1.png" alt="">{/if}北山街馆区</a>
                <a onclick="clickGuan('B')" href="javascript:;" class="venue {if condition="$data['venue'] eq 2" }select {/if} " data-v="B">{if condition="$data['venue'] eq 2" }<img src="/static/pc/img/button.png" alt="">{else/}<img src="/static/pc/img/button1.png" alt="">{/if}栖霞岭馆区</a>
                <input class="guan"  name="venue" id="clickGuanVal" type="hidden" value="{$list.venue}">
            </div>
            <div>
                <span>参观时间</span>
                <input type="text" AUTOCOMPLETE="off" name="day" class="cday timeday" id="dateBox" value="{$list['day']}" placeholder="选择参观日期" style="margin-bottom: 30px">
            </div>
            {if condition="$data['explain'] eq 1" }
                <div class="guan_time"><span></span><p> 北山街馆区</p></div>
                <div class="timeList ">
                    <span></span>
                    <div class="isExplain">
                        <div class="timePart">
                            <span></span>
                            <a href="javascript:;" class="venue morning {if condition="$list['dinner'] eq 0" }select{/if}">上午</a>
                            <p class="clear"></p>
                            <span></span>
                            <a href="javascript:;" class="venue afternoon {if condition="$list['dinner'] eq 1" }select{/if}">下午</a>
                        </div>
                        <div class="arriveTime">
                            <span>小时</span>
                            <select name="" id="visithour_a">
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                            </select>
                            <span>分钟</span>
                            <select name="" id="visitminute_a" style="margin-bottom: 30px">
                                <option value="00">00</option>
                                <option value="15">15</option>
                                <option value="30">30</option>
                                <option value="45">45</option>
                            </select><br>

                            <span>小时</span>
                            <select name="" id="visithour_p">
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                            </select>
                            <span>分钟</span>
                            <select name="" id="visitminute_p">
                                <option value="00">00</option>
                                <option value="15">15</option>
                                <option value="30">30</option>
                                <option value="45">45</option>
                            </select>
                            <input type="hidden" name="arrival_time" class="arrive">
                            <input type="hidden" name="dinner" class="arrive_part">
                            <input class="address" name="mobile" type="hidden" value="{$list['mobile']}">
                        </div>
                    </div>
                </div>
            {else/}
                <div class="guan_time"><span></span><p> 北山街馆区</p></div>
                <div class="timeList ">
                    <span></span>
                    <p>
                        {foreach $visit_time as $k=>$v}
                        <a onclick="setValue({$k})" {if condition="$k eq $data.between_time"}class="on" {/if}>{$v}</a>
                        {/foreach}
                        <input class="time" name="time" type="hidden" value="{$list['between_time']}">
                        <input class="address" name="mobile" type="hidden" value="{$list['mobile']}">
                    </p>
                </div>
                <div class="bguan">
                    <span></span>
                    <p class="guan_time"> 栖霞岭馆区</p>
                    <div class="timeList1">
                        <span></span>
                        <p>
                            {foreach $visit_time as $k=>$v}
                            <a href="javascript:;" onclick="setValue({$k}"> {$v}</a>
                            {/foreach}
                        </p>
                    </div>
                </div>
            {/if}
            <input type="hidden" name="explain" class="explain1" value="{$list.explain}">
            <input type="hidden" name="id" value="{$list.id}">
            <p class="clear"></p>
            <a href="javascript:;" class="submit"><img src="/static/pc/img/check1.png" alt=""></a>
        </div>
    </form>
</div>
<script>
    function amOrPmSelect() {
        var am_select_hour = '{$am_select.0}';
        var am_select_min = '{$am_select.1}';
        var pm_select_hour = '{$pm_select.0}';
        var pm_select_min = '{$pm_select.1}';

        if (am_select_hour) {
            $('#visithour_a option[value="' + am_select_hour + '"]').prop("selected", true);
        }
        if (am_select_min) {
            $('#visitminute_a option[value="' + am_select_min + '"]').prop("selected", true);
        }
        if (pm_select_hour) {
            $('#visithour_p option[value="' + pm_select_hour + '"]').prop("selected", true);
        }
        if (pm_select_min) {
            $('#visitminute_p option[value="' + pm_select_min + '"]').prop("selected", true);
        }

        $('#information').show();
    }

    function clickGuan(val){
        $('#clickGuanVal').attr('value' , val);
    }

    amOrPmSelect();

    function sendMobile(){
        var mobile = $(".telephone").val();
        $.ajax({
            type: 'POST',
            url: 'sendSNS',
            data: {"mobile":mobile},
            dataType:'json',
            success: function (result) {
                // alert("成功");
                if(result.code == -1){
                    // alert(result.msg)
                    layer.alert(result.msg,{
                        // icon: 1,
                        title:false,
                        time:5000

                    })

                }else{
                    $(".codezong").append(
                        '<input  type="hidden" class="code1">');
                    $(".code1").val(result.code);
                    $(".cache").val(result.cache);
                }

            },
            error: function(result){
                // alert("错误");
                layer.alert('错误',{
                    icon: 2,
                    title:false,
                    time:5000
                })
            },
        });
    }

    //
    function checkCode(){
       var code = $(".code").val();
       var code1 = $(".code1").val();
        if(code != code1 ){
            // alert("验证码输入错误");
            layer.alert('验证码输入错误',{
                icon: 2,
                title:false,
                time:5000
            })
            window.location.reload();
        }
    }

    /**
     * 选择A馆B馆对应的时间消失
     * */
    $('.timeList').on('click','a',function(){
        if($(this).hasClass('booked')){
            return false;
        }
        if($(this).hasClass('booked1')){
            return false;
        }
        var time =  $(this).text();
        $(".timeList1 a").siblings().removeClass('booked1');
        $(".timeList1 a").each(function(){
            if(time == $(this).text()){
                $(this).addClass("booked1");

            }
        });
    });
    $('.timeList1').on('click','a',function(){
        if($(this).hasClass('booked')){
            return false;
        }
        if($(this).hasClass('booked1')){
            return false;
        }
        var time =  $(this).text();
        $(".timeList a").siblings().removeClass('booked1');
        $(".timeList a").each(function(){
            if(time == $(this).text()){
                $(this).addClass("booked1");
            }
        });
    });



    /**
     * 点击获得对应的时间值
     * */
    function setValue() {
        $('.timeList').on('click',"a",function(){
            if($(this).hasClass('booked')){
                return false;
            }
            if($(this).hasClass('booked1')){
                return false;
            }
            $(this).addClass('on').siblings().removeClass('on');
            $('.time').val($(this).html());
        })
    }
    function setValue1() {
        $('.timeList1').on('click',"a",function(){
            if($(this).hasClass('booked')){
                return false;
            }
            if($(this).hasClass('booked1')){
                return false;
            }
            $(this).addClass('on').siblings().removeClass('on');
            $('.time1').val($(this).html());
        })
    }

    function agree(obj){
        if($(obj).is(':checked')){
            $('.submit').attr('href','information.html').html('<img src="static/pc/img/woyaoyuyue.png" alt="">')
        }
        else{
            $('.submit').attr('href','javascript:;').html('<img src="static/pc/img/woyaoyuyue1.png" alt="">')
        }
    }


    /**
     * 选择馆加颜色
     * */
    $('.venue').click(function(){
        $(this).addClass('select').siblings().removeClass('select');
        $(this).find('img').attr('src','static/pc/img/button.png');
        $(this).siblings().find('img').attr('src','static/pc/img/button1.png');
    });
    /**
     * 上来馆泽的框框
     * */
    $('.timeList a').click(function(){
        if($(this).hasClass('booked')){
            return false;
        }
        $(this).addClass('on').siblings().removeClass('on');
        $('input.time').val($(this).html());
    });


    function checkMobile(tel) {
        if(tel.length==11){
            var reg = /(^1[3|4|5|6|7|8|9][0-9]{9}$)/;
            if (reg.test(tel)) {

                $('.send').addClass('send_button');
                $(".codezong").css("display","block");
                $(".send").attr("onclick","sendMobile();");
                $(".codezong").append(
                    '<input name="code" type="text" class="code" onchange="checkCode()">'
                );
                return true;
            }else{
                // alert('手机号输入不正确')
                layer.alert('手机号输入不正确',{
                    icon: 2,
                    title:false,
                    time:5000
                })
                return false;
            };
        }
    }


    $('.submit').click(function(){
        if("{$data['explain']}" == 1){
            if($('.morning').hasClass('select')){
                var hour = $('#visithour_a').val()
                var minute = $('#visitminute_a').val()
                $('input.arrive_part').val("上午");
                $('input.arrive').val(hour + ":" + minute);
            }
            if($('.afternoon').hasClass('select')){
                var hour = $('#visithour_p').val()
                var minute = $('#visitminute_p').val()
                $('input.arrive_part').val("下午");
                $('input.arrive').val(hour + ":" + minute);
            }
            $('#information').submit()
        }else{
            $('.edit input').each(function(){
                if($(this).val() == ''){
                    if($(this).hasClass('time')){
                        // alert('请输入参观时间');
                        layer.alert('请输入参观时间',{
                            icon: 2,
                            title:false,
                            time:5000
                        })
                        window.location.reload();
                        return false
                    }
                }else{
                    var venue = $(".mb0 .select").attr("data-v");
                    $(".guan").val(venue);
                    $('#information').submit()
                }
            })
        }
    });

    /**
     * 日期点击ajax循环添加
     * */
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#dateBox', //指定元素
            ready: function() {
                $(".layui-laydate-content table tr td:nth-child(2)").addClass('laydate-disabled');
                $.ajax({
                    type: 'GET',
                    url: '/getDate',
                    success: function (result) {
                        var conNotV = result.conNotView;
                        var conV = result.canVIew;
                        var dataEm = $(".layui-laydate-content table tr td");
                        $.each(dataEm,function(key,item){
                            if(!($.inArray(item.getAttribute('lay-ymd'), conV) == -1)){
                                item.setAttribute('class','');
                            }
                            if(!($.inArray(item.getAttribute('lay-ymd'), conNotV) == -1)){
                                item.setAttribute('class','laydate-disabled');
                            }
                        })
                    },
                    error: function(result){
                    },
                });
                if($(".explain1").val() ==1 ){
                    $(".layui-laydate-content table tr td:nth-child(7)").addClass('laydate-disabled');
                    $(".layui-laydate-content table tr td:nth-child(1)").addClass('laydate-disabled');
                }
            },
            change: function() {
                $(".layui-laydate-content table tr td:nth-child(2)").addClass('laydate-disabled');
                if($(".explain1").val() ==1 ){
                    $(".layui-laydate-content table tr td:nth-child(7)").addClass('laydate-disabled');
                    $(".layui-laydate-content table tr td:nth-child(1)").addClass('laydate-disabled');
                }
            },
            done: function(value, date, endDate){
                $(".cday").val(value);
                // timeday();
                var venue = $(".mb0 .select").attr("data-v");
                // var venue =  $(".select_venue .on").attr("data-v");
                // alert(venue);
                var day = $(".cday").val();
                var day1 = $(".bday").val();
                $.ajax({
                    type: 'POST',
                    url: 'runimformation',
                    data: {"day":day,"venue":venue,"day1":day1,'explain':$(".explain1").val()},
                    dataType:'json',
                    success: function (result) {
                        $(".aguan").find("p").remove();
                        // $(".bguan").find("p").remove();
                        // if (result.yuyue){
                        if(result.explain == 1){
                                if(result.yuyueb){
                                    if(result.yuyueb == ""){
                                        // return ;
                                    }
                                    if(result.yuyueb == "0"){
                                        // alert(result.venue1+"上午的预约人数已满");
                                        layer.alert(result.venue1+"上午的预约人数已满",{
                                            icon: 2,
                                            title:false,
                                            time:5000
                                        })
                                        // return ;
                                    }
                                    if(result.yuyueb == "1"){
                                        // alert(result.venue1+"下午的预约人数已满");
                                        layer.alert(result.venue1+"下午的预约人数已满",{
                                            icon: 2,
                                            title:false,
                                            time:5000
                                        })
                                        // return ;
                                    }
                                    if(result.yuyueb == "0,1"){
                                        // alert(result.venue1+"当日预约人数已满");
                                        layer.alert(result.venue1+"当日预约人数已满",{
                                            icon: 2,
                                            title:false,
                                            time:5000
                                        })
                                        // return ;
                                    }
                                }
                                if(result.yuyue == ""){
                                    return ;
                                }
                                if(result.yuyue == "0"){
                                    // alert(result.venue+"上午的预约人数已满");
                                    layer.alert(result.venue+"上午的预约人数已满",{
                                        icon: 2,
                                        title:false,
                                        time:5000
                                    })
                                    return ;
                                }
                                if(result.yuyue == "1"){
                                    // alert(result.venue+"下午的预约人数已满");
                                    layer.alert(result.venue+"下午的预约人数已满",{
                                        icon: 2,
                                        title:false,
                                        time:5000
                                    })
                                    return ;
                                }
                                if(result.yuyue == "0,1"){
                                    // alert(result.venue+"当日预约人数已满");
                                    layer.alert(result.venue+"当日预约人数已满",{
                                        icon: 2,
                                        title:false,
                                        time:5000
                                    })
                                    return ;
                                    }
                            }else{
                                var arr=JSON.stringify(result.yuyue);
                                var cc=JSON.parse(arr);
                                $.each(result.visit,function(i,val){
                                    if($.inArray( i, cc )==-1){
                                        $(".aguan").append(
                                            '<p href="javascript:;" onclick="setValue()" >' +
                                            val+ "</p>")
                                    }else{
                                        $(".aguan").append(
                                            '<p href="javascript:;" class="booked" onclick="setValue()" >' +
                                            val+ "</p>")
                                    }
                                });
                            }
                        // }
                    },
                    error: function(result){
                    },
                });
            },
            max : 30
        });
    });



    /**
     * 馆项点击ajax循环添加
     * */
    $('.mb0 a').click(function(){
        var checkValue = $(this).attr("data-v");
        var day = $(".cday").val();
        var day1 = $(".bday").val();
        $.ajax({
            type: 'POST',
            url: 'runimformation',
            data: {"day":day,"venue":checkValue,"day1":day1,'explain':$(".explain1").val()},
            dataType:'json',
            success: function (result) {
                $(".aguan p").find("a").remove();
                $(".bguan p").find("a").remove();
                $(".bguan").hide();
                // if (result.yuyue){
                    if(result.explain == 1){
                        if(result.yuyueb){
                            if(result.yuyueb == ""){
                                // return ;
                            }
                            if(result.yuyueb == "0"){
                                // alert(result.venue1+"上午的预约人数已满");
                                layer.alert(result.venue1+"上午的预约人数已满",{
                                    icon: 2,
                                    title:false,
                                    time:5000
                                })
                                // return ;
                            }
                            if(result.yuyueb == "1"){
                                // alert(result.venue1+"下午的预约人数已满");
                                layer.alert(result.venue1+"下午的预约人数已满",{
                                    icon: 2,
                                    title:false,
                                    time:5000
                                })
                                // return ;
                            }
                            if(result.yuyueb == "0,1"){
                                // alert(result.venue1+"当日预约人数已满");
                                layer.alert(result.venue1+"当日预约人数已满",{
                                    icon: 2,
                                    title:false,
                                    time:5000
                                })
                                // return ;
                            }
                        }
                        if(result.yuyue == ""){
                            return ;
                        }
                        if(result.yuyue == "0"){
                            // alert(result.venue+"上午的预约人数已满");
                            layer.alert(result.venue+"上午的预约人数已满",{
                                icon: 2,
                                title:false,
                                time:5000
                            })
                            return ;
                        }
                        if(result.yuyue == "1"){
                            // alert(result.venue+"下午的预约人数已满");
                            layer.alert(result.venue+"下午的预约人数已满",{
                                icon: 2,
                                title:false,
                                time:5000
                            })
                            return ;
                        }
                        if(result.yuyue == "0,1"){
                            // alert(result.venue+"当日预约人数已满");
                            layer.alert(result.venue+"当日预约人数已满",{
                                icon: 2,
                                title:false,
                                time:5000
                            })
                            return ;
                        }

                    }else{
                        var arr=JSON.stringify(result.yuyue);
                        var cc=JSON.parse(arr);
                        $.each(result.visit,function(i,val){
                            if($.inArray( i, cc )==-1){
                                $(".aguan p").append(
                                    '<a href="javascript:;" onclick="setValue()" >' +
                                    val+ "</a>")
                            }else{
                                $(".aguan p").append(
                                    '<a href="javascript:;" class="booked" onclick="setValue()" >' +
                                    val+ "</a>")
                            }
                        });
                        if(result.yuyueb){
                            $(".bguan").css("display","block");
                            $(".bguan").append(
                                ' <input class="time1" name="time1" type="hidden">');
                            var arr1=JSON.stringify(result.yuyueb);
                            var cc1=JSON.parse(arr1);
                            $.each(result.visit,function(i,val){
                                if($.inArray( i, cc1 )==-1){
                                    $(".bguan p").append(
                                        '<a href="javascript:;" onclick="setValue1()" >' +
                                        val+ "</a>")
                                }else{
                                    $(".bguan p").append(
                                        '<a href="javascript:;" class="booked"  onclick="setValue1()" >' +
                                        val+ "</a>")
                                }
                            })
                        }
                    }
                // }
            },
            error: function(result){
                //alert("错误");
            },
        });
    });
</script>
</body>
</html>